/**
 * 针对于文章目录处理的一些js代码
 */
export function setArticleMenuStyle() {

    "use strict";

    $('.menu-icon').on('click', function () {
        $('header.left').toggleClass('open');
        $('.mobile-header, main.content').toggleClass('push');
    });

    $('main.content, header.left button.close').on('click', function () {

        $('header.left').removeClass('open');
        $('.mobile-header, main.content').removeClass('push');
    });

    /*=========================================================================
     Counterup JS for facts
     =========================================================================*/
    $('.count').counterUp({
        delay: 10,
        time: 2000
    });

    /*=========================================================================
     Progress bar animation with Waypoint JS
     =========================================================================*/
    if ($('.skill-item').length > 0) {
        var waypoint = new Waypoint({
            element: document.getElementsByClassName('skill-item'),
            handler: function (direction) {

                $('.progress-bar').each(function () {
                    var bar_value = $(this).attr('aria-valuenow') + '%';
                    $(this).animate({width: bar_value}, {easing: 'linear'});
                });

                this.destroy()
            },
            offset: '50%'
        });
    }

    /*=========================================================================
     One Page Scroll with jQuery
     =========================================================================*/
    $('.vertical-menu li a[href^="#"]:not([href="#"])').on('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 800, 'easeInOutQuad');
        event.preventDefault();
    });

    /*=========================================================================
     Add (nav-link) class to main menu.
     =========================================================================*/
    $('.vertical-menu li a').addClass('nav-link');
    /*=========================================================================
     Bootstrap Scrollspy
     =========================================================================*/
    $("body").scrollspy({target: ".scrollspy", offset: 50});

    /*=========================================================================
     Background Image with Data Attribute
     =========================================================================*/
    var bg_img = document.getElementsByClassName('background');

    for (var i = 0; i < bg_img.length; i++) {
        var src = bg_img[i].getAttribute('data-image-src');
        bg_img[i].style.backgroundImage = "url('" + src + "')";
    }

    /*=========================================================================
     Spacer with Data Attribute
     =========================================================================*/
    var list = document.getElementsByClassName('spacer');

    for (var i = 0; i < list.length; i++) {
        var size = list[i].getAttribute('data-height');
        list[i].style.height = "" + size + "px";
    }

    /*=========================================================================
            Scroll to Top
    =========================================================================*/
    $(window).scroll(function () {
        if ($(this).scrollTop() >= 250) {        // If page is scrolled more than 50px
            $('#return-to-top').fadeIn(200);    // Fade in the arrow
        } else {
            $('#return-to-top').fadeOut(200);   // Else fade out the arrow
        }
    });
    $('#return-to-top').on('click', function () {      // When arrow is clicked
        $('body,html').animate({
            scrollTop: 0                       // Scroll to top of body
        }, 400);
    });

    // 在nav-link类中添加一些标签用于hover展现内容
    $(".nav-link").each(function () {
        let content = $(this).text()
        $(this).wrapAll("<div class='div-nav-link'></div>")
        $(this).after("<div class='overflow-content shadow-dark background-white'><span>" + content + "</span></div>")
    })

    /**
     * hoverDelay 延迟hover 暂时没用上
     * @param options
     * @returns {*|jQuery}
     */
    $.fn.hoverDelay = function (options) {
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function () {
                $.noop();
            },
            outEvent: function () {
                $.noop();
            }
        };
        var sets = $.extend(defaults, options || {});
        var hoverTimer;
        var outTimer;
        return $(this).each(function () {
            $(this).hover(function () {
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
            }, function () {
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
            });
        });
    };

    /**
     * 给目录标题增加延迟hover
     * hover ( fnOver(){}, fnOut(){} )
     */
    let hoverTimer
    let outTimer
    let isHover
    $('.div-nav-link').hover(function () {
        let _this = $(this)
        isHover = true
        // 初始化所有timer
        clearTimeout(hoverTimer)
            hoverTimer = setTimeout(() => {
                if (isHover) {
                    _this.children('.overflow-content').css("display", "block");
                }
            }, 1000)

    }, function () {
        let _this = $(this)
        // 初始化所有timer
        clearTimeout(outTimer)
        isHover = false
        outTimer = setTimeout(() => {
            _this.children('.overflow-content').css("display", "none");
        }, 0)
    })

}